<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button>按钮</button>
  <script>
    /* 
      箭头函数可以被当做匿名函数

      箭头函数让函数写起来更加简洁

      基础的箭头函数
      (参数) => {
        // 代码
      }

      // 只有一个参数的箭头函数 不需要再写括号
      参数 => {}  

        function (参数) {}
        (参数) => {}

      // 执行的代码中只有返回值的箭头函数 不需要再写大括号
      () => 返回值
        function () {
          return 返回值
        }

        () => {
          return 返回值
        }
      // 同上 且返回值是一个对象
      () => ({a: 1, b: 2})
        function () {
          return {}
        }

        () => {
          return {}
        }    

      // 箭头函数通常被替换到使用匿名函数的位置
      // axios.get(url).then(function (res) {})

      axios.get(url).then(res => {})

      setTimeout(function () {
        // this
      }, 1000)

      setTimeout(() => {

      }, 1000)

      箭头函数的this指向和普通函数原理不太一致
      
      如果在当前环境下，使用箭头函数，一般箭头函数中的this指向当前环境的this

    */
    // function fn () {}

    var fn = function () {}
    var fn = () => {

    }
    
    var btn = document.querySelector('button')
    btn.onclick = function () {
      setTimeout(() => {
        console.log(this.nodeName)
      }, 1000)
    }
    
    var arr = ['书名1', '书名2', '书名3']

    /* var narr = arr.map(function (bookname) {
      return '《' + bookname + '》'
    }) */
    var narr = arr.map(bookname => '《' + bookname + '》')

    
  </script>

</body>
</html>